<template>
	<view class="container">

		<view class="form">
			<view class="cu-form-group">
				<view class="title">申请人</view>
				<input type="text" placeholder="请输入您的名字" v-model="information.user_name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">身份证</view>
				<input type="text" placeholder="请输入您的身份证号码" v-model="information.idcard_no"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input type="text" placeholder="请输入您的联系方式" v-model="information.phone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">微信号</view>
				<input type="text" placeholder="请输入您的常用微信号" v-model="information.wechat_id"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所在城市</view>
				<view class="city">
					<text class="city-name" @tap="select_city">{{information.city}}</text>
					<view class="bg-img location" @tap="getLocation"
						:style="{ backgroundImage: 'url(' + '/static/images/default/location.png' + ')' }"></view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input type="text" placeholder="请输入您的详细地址" v-model="information.address"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">养宠经验</view>
				<radio-group name="experience" class="radioGroup" @change="experience_handle">
					<label style="margin-right: 30rpx;">
						<radio value="1" checked active-background-color="#FE8C00" active-border-color="#FE8C00" />
						<text>有</text>
					</label>
					<label>
						<radio value="0" active-background-color="#FE8C00" active-border-color="#FE8C00" />
						<text>无</text>
					</label>
				</radio-group>
			</view>
			<view class="cu-form-group">
				<view class="title">住房情况</view>
				<radio-group name="housing" class="radioGroup" @change="housing_handle">
					<label style="margin-right: 30rpx;">
						<radio value="0" checked active-background-color="#FE8C00" active-border-color="#FE8C00" />
						<text>自有住房</text>
					</label>
					<label style="margin-right: 30rpx;">
						<radio value="1" active-background-color="#FE8C00" active-border-color="#FE8C00" />
						<text>合租</text>
					</label>
					<label>
						<radio value="2" active-background-color="#FE8C00" active-border-color="#FE8C00" />
						<text>独租</text>
					</label>
				</radio-group>
			</view>

			<view class="cu-form-group align-start">
				<view class="title">领养留言</view>
				<view style="position: relative;width: 100%; height: fit-content;">
					<textarea class="message" value="" :maxlength="textarea_max" v-model="information.description"
						placeholder="请描述您自身的情况，以及领养意向，详细的信息能够更快的通过人工审核" @input="textareaInput" />
					<text class="sub-text">{{textarea_num}}/{{textarea_max}}</text>
				</view>
			</view>
		</view>

		<view class="wanlian cu-bar tabbar foot flex flex-direction"><button @tap="adopt_handle"
				class="cu-btn wanl-bg-theme round lg">申请</button></view>

		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress" :level="2"></wanl-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wanlsys: {},
				information: {
					pet_id: '',
					user_name: '',
					idcard_no: '',
					phone: '',
					wechat_id: '',
					city: '',
					address: '',
					experienced: '1',
					housing: '0',
					description: ''
				},
				textarea_num: 0, // 文本域文字数量
				textarea_max: 300, // 文本域最大输入数量
			};
		},
		onLoad(e) {
			this.wanlsys = this.$wanlshop.wanlsys();
			this.getLocation();
			this.information.pet_id = e.id;
		},
		methods: {
			// 文本域输入数量
			textareaInput(e) {
				console.log('input', e)
				this.textarea_num = e.detail.cursor;
			},
			// 获取所在城市
			async getLocation() {
				this.information.city = '获取位置中...';
				let res = await this.$wanlshop.location();
				console.log('获取所在城市', res)
				if (res.code == 1) {
					res = res.data
					this.information.city = res.address.city;
				} else {
					this.information.city = '定位失败，请手动选择'
				}
			},
			// 选择城市
			select_city() {
				if (this.information.city == '获取位置中...') return;
				this.$refs.wanlAddress.show();
			},
			successSelectAddress(addr) {
				this.information.city = addr.city;
			},

			// 选择照片 -- 待完成
			choose_image() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log('chooseImage', res.tempFilePaths[0])

						uni.getFileInfo({
							filePath: res.tempFilePaths[0],
							digestAlgorithm: 'md5',
							success: res => {
								console.log('getFileInfo', res)
							}
						})

						// 上传文件至服务器
						uni.uploadFile({
							url: '/common/upload',
							file: res.tempFilePaths[0],
							// header: {"Content-Type":"multipart/form-data"},
							name: 'file',
							success: res => {
								console.log('upload', res)
							}
						})
					}
				})
			},
			// 选择身份证正面照
			idCart_front() {
				this.choose_image();
			},

			// 养宠经验
			experience_handle(e) {
				console.log('养宠经验', e.detail.value)
				this.information.experienced = e.detail.value;
			},
			// 住房情况
			housing_handle(e) {
				console.log('住房情况', e.detail.value)
				this.information.housing = e.detail.value;
			},
			// 申请
			adopt_handle() {
				console.log('申请', this.information)

				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;

				for (let item in this.information) {
					if (this.information[item] == '' || this.information.city == '定位失败，请手动选择' || this.information.city ==
						'获取位置中...') {
						this.$wanlshop.msg('请完善申请信息')
						return;

					}
				}

				// 手机号验证
				if (!myreg.test(this.information.phone)) {
					this.$wanlshop.msg('请填写正确手机号');
					return;
				}

				this.$api.post({
					url: '/wanlshop/user/adopt',
					data: this.information,
					cancelText: '返回',
					success: res => {
						console.log('申请成功', res)
						uni.showModal({
							content: '申请成功, 等待审核',
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/user/pet/pet'
									})
								}
								if (res.cancel) {
									uni.reLaunch({
										url: '/pages/index'
									})
								}
							}
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wanlian.cu-bar.tabbar {
		background-color: transparent;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}

	page {
		background-color: #fafafa;
	}

	.container {
		padding-bottom: 150rpx;

		.form {
			background-color: white;
			border-radius: 16rpx;
			padding: 0 20rpx 30rpx;
			margin: 20rpx;

			.cu-form-group {
				gap: 50rpx;
				color: #3d3d3d;

				.title {
					flex-shrink: 0;
				}
			}

			.city {
				display: flex;
				flex: 1;
				justify-content: space-between;
				gap: 40rpx;

				.city-name {
					flex: 1;
				}

				.location {
					width: 42rpx;
					height: 40rpx;
					background-size: 100% 100%;
				}
			}

			.idCart {
				// background-color: pink;
				width: 100%;
				display: flex;
				align-items: center;

				image {
					height: 150rpx;
					margin: 20rpx 0;
				}
			}

			.radioGroup {
				flex: 1;

				radio {
					transform: scale(0.7);
				}
			}

			.message {
				background-color: #f7f7f7;
				padding: 20rpx 20rpx 40rpx;
				border-radius: 16rpx;
				height: 400rpx;
				line-height: 1.4;
				margin-bottom: 0;
			}

			.sub-text {
				position: absolute;
				bottom: 8rpx;
				right: 16rpx;
				font-size: 22rpx;
				color: #3d3d3d80;
			}
		}

	}
</style>